<template>
<section class="recommend">
     <div class="recommend-title">
        <van-divider :style="{borderColor:'#ccc',padding:'0 16px'}">
             <!-- 插槽 -->
            <slot></slot>
        </van-divider>
    </div>  
    <div class="recommend-list">
        <div class="recommend-item" v-for="(item,index) in recommendList" :key='index' @click="goDetail(item.id)">
            <img :src="item.imageHost + item.mainImage">
            <p>{{item.subtitle}}</p> <i>￥ {{item.price}}</i>
        </div>
    </div>
</section>
</template>
<script>
import {getRecommend} from '@/http/index';
export default {
     data() {
        return {
            recommendList: []
        }
    },
    methods:{
        //推荐商品
        fecthRecommend() {
            getRecommend().then(res => {
                this.recommendList = res
            })
        },
        //跳转商品详情
        goDetail(id){
                this.$router.push('/product/' + id)
        }
    },
    created(){
         this.fecthRecommend();
    },
}
</script>
<style lang="scss" scoped>
// 公共样式
@import '../common/style/mixin';
// 单独样式
@import '../css/recomm-box';
</style>